<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="产品列表" width="900px" destroyOnClose>
    <a-input-search placeholder="请输入关键字" @search="onSearch">
    </a-input-search>

    <a-row>
      <a-col :span="8">
        <div v-if="dataList?.length > 0" class="nav-dropdown-group" v-for="(item, index) in dataList[0]" :key="index">
          <h4 class="nav-dropdown-group-product-name">{{ item.name }}</h4>
          <div class="nav-dropdown-group-product-item" v-if="item.children"
            v-for="(itemChildren, index1) in item.children" :key="index1">
            <a class="nav-dropdown-group-product-item-name" @click="handleGoProduct(itemChildren.code)">
              {{ itemChildren.name }}
            </a>
          </div>
        </div>
      </a-col>

      <a-col :span="8">
        <div v-if="dataList?.length >= 2" class="nav-dropdown-group" v-for="(item, index) in dataList[1]" :key="index">
          <h4 class="nav-dropdown-group-product-name">{{ item.name }}</h4>
          <div class="nav-dropdown-group-product-item" v-if="item.children"
            v-for="(itemChildren, index1) in item.children" :key="index1">
            <a class="nav-dropdown-group-product-item-name" @click="handleGoProduct(itemChildren.code)">
              {{ itemChildren.name }}
            </a>
          </div>
        </div>
      </a-col>

      <a-col :span="8">
        <div v-if="dataList?.length >= 3" class="nav-dropdown-group" v-for="(item, index) in dataList[2]" :key="index">
          <h4 class="nav-dropdown-group-product-name">{{ item.name }}</h4>
          <div class="nav-dropdown-group-product-item" v-if="item.children"
            v-for="(itemChildren, index1) in item.children" :key="index1">
            <a class="nav-dropdown-group-product-item-name" @click="handleGoProduct(itemChildren.code)">
              {{ itemChildren.name }}
            </a>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-empty v-if="dataList?.length == 0" style="margin-top: 60px;" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user';
import { usePermissionStore } from '/@/store/modules/permission';
import { listServiceTree } from '/@/views/system/service/list/service.api'
import { selectWorkspace } from '/@/api/sys/user';
import { useRouter } from 'vue-router';
const router = useRouter();
// 声明Emits
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const permissionStore = usePermissionStore();
const dataList = ref<any>([])
const respData = ref<any>([])

/**
 * 数据
 */
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  setDrawerProps({ confirmLoading: false });
  respData.value = await listServiceTree({})
  
  processRespData(respData.value)
  // dataList.value = respData
});


const processRespData = (data) => {
  dataList.value = []
  for (let index = 0; index < data.length; index++) {
    const element = data[index];
    const dataList = getData(index % 3)
    dataList.push(element)
  }
  console.log(dataList.value)
}

const onSearch = (keyWord) => {
  const data: any = []
  respData.value.forEach(e => {
    const children = e.children
    const dataChildren : any = []
    if (!children) {
      return
    }

    children.forEach(c => {
      if (c.name.includes(keyWord)) {
        dataChildren.push(c)
      }
    })

    if (dataChildren.length > 0) {
      const newE = Object.assign(e)
      newE.children = dataChildren
      data.push(newE)
    }
  })
  processRespData(data)
}

const getData = (index) => {
  let showData = dataList.value[index]
  if (!showData) {
    showData = []
    dataList.value[index] = showData
  }
  return showData
}

const handleGoProduct = async (code) => {
  console.log("code", code);
  await selectWorkspace({serviceCode: code})
  closeDrawer()
  // await router.push({ path: '/'})
  location.reload()
}

</script>


<style lang="less">
@import './index.less';
</style>
